import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Header extends Component{
	render() {
		return (
			<div>
				<Title/>
			</div>
		)
	}
}
class Title extends Component{
	static contextTypes={
		color:PropTypes.string
	}
	render() {
		return (
			<div style={{color:this.context.color}}>
				Title
			</div>
		)
	}
}
class Main extends Component{
	render() {
		return (
			<div>
				<Content>
				</Content>
			</div>
		)
	}
}
class Content extends Component{
	static contextTypes={
		color: PropTypes.string,
		changeColor:PropTypes.func
	}
	render() {
		return (
			<div style={{color:this.context.color}}>
				Content
				<button onClick={()=>this.context.changeColor('green')}>绿色</button>
				<button onClick={()=>this.context.changeColor('orange')}>橙色</button>
			</div>
		)
	}
}
class Page extends Component{
	constructor() {
		super();
		this.state={color:'red'};
	}
	static childContextTypes={
		color: PropTypes.string,
		changeColor:PropTypes.func
	}
	getChildContext() {
		return {
			color: this.state.color,
			changeColor:(color)=>{
				this.setState({color})
			}
		}
	}
	render() {
		return (
			<div>
				<Header/>
				<Main/>
			</div>
		)
	}
}
ReactDOM.render(<Page/>,document.querySelector('#root'));